<template>
	<div class="wrapper">
		<swiper :options="swiperOption" >
		    	<!-- slides -->
		    <swiper-slide 
		    	v-for="item of swiperList" 
		    	:key="item.id"
	    	>
	    		<img class="swiper-img" :src="item.imgUrl">
	    	</swiper-slide>
		    
		    <!-- Optional controls -->
		    <div 
		    	class="swiper-pagination"  
		    	slot="pagination"
	    	></div>
		  </swiper>
	</div>
</template>

<script type="text/javascript">
	export default {
		props: {
			swiperList: Array
		},
		name: 'HomeSwiper',
		data: function(){
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					loop: true
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background: #fff;
	.wrapper
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 31.25%;
		background: #ccc;
		.swiper-img
			width: 100%;
</style>